<template>
  <div class="middle-all-con" :style="setbackgroundzh()">
    <div class="zhechart-sty">
      <Zhechart :cdata="cdatatwo" :nowwidth="'100%'" />
    </div>
    <div class="zhstep-sty">
      <Zhstep
        :current-val="parseInt(currentVal)"
        :step-array="stepArray"
        :now-phase-id="nowPhaseId"
        @growthAcitive="growthAcitive"
      />
    </div>
  </div>
</template>

<script>
import Zhstep from "./components/grow-step";
import Zhechart from "@/components/Echarts/components/linecharttwo/chart.vue";
import * as echarts from "echarts";

export default {
  components: { Zhechart, Zhstep },
  props: {
    growthPhaseList: {
      type: Array,
      default: () => {
        return [];
      }
    }, nowPhaseId: {
      type: [String, Number],
      default: () => {
        return '';
      }
    }
  },
  data() {
    return {
      cdatatwo: {
        xAxisdata: [],
        xData: [""],
        seriesData: [
          {
            name: "有效积温（℃）",
            type: "line",
            data: [],
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(1, 0, 0, 1, [
                  { offset: 0, color: "#04FA99" },
                  { offset: 1, color: "#3EACE5" }
                ])
              }
            },
            z: -12
          }
        ]
      },
      currentVal: "",
      stepArray: []
    };
  },

  watch: {
    growthPhaseList() {
      this.queryGrowthPhaseByBatchId();
    }
  },
  created() {},
  mounted() {},
  methods: {
    growthAcitive(item) {
      this.$emit("selectGrowthId", item);
    },
    // 根据批次id获取生长阶段列表和积温
    queryGrowthPhaseByBatchId() {
      this.currentVal = this.growthPhaseList.length;
      let xAxisdata = [];
      let xData = [];
      let seriesData = [];
      this.stepArray = [];
      // console.log(this.growthPhaseList)

      this.growthPhaseList.forEach((element) => {
        xAxisdata.push(element.growthPhaseName);
        seriesData.push(element.cumulative);
        let src = {
          name: element.growthPhaseName,
          desc: "第" + element.startDate + '~' + element.endDate + "天",
          imgurl: element.imgurl
            ? "data:image/jpeg;base64," + element.imgurl
            : "",
          growthPhaseNo: element.growthPhaseNo
        };
        this.stepArray.push(src);
      });
      console.log(seriesData)
      this.cdatatwo.xAxisdata = xAxisdata;
      this.cdatatwo.xData = xData;
      this.cdatatwo.seriesData[0].data = seriesData;
    },
    // 设置背景图
    setbackgroundzh() {
      let farmingtypeid = sessionStorage.farmingTypeNo
      var backurl = ""
      switch (farmingtypeid) {
        case 'dt':
          backurl = require("@/assets/conservation-model/soil.png")
          break;
        case "dp":
          // 大棚种植
          backurl = require("@/assets/conservation-model/soil.png")
          break;
        case "xm":
          // 畜牧养殖
          backurl = require("@/assets/conservation-model/cm.png")
          // backurl = require("@/assets/oth-img/生态沟渠.png")
          break;
        case "sc":
          // 水产养殖
          backurl = require("@/assets/conservation-model/sc.png")
          break;
        case "gc":
          // 工厂养鱼
          backurl = require("@/assets/conservation-model/sc.png")
          break;
        default:
          // backurl = '@/assets/oth-img/big-fac.jpg'
          backurl = require("@/assets/conservation-model/soil.png")
          break;
      }
      // return require('@/assets/oth-img/big-fac.jpg')
      return { 'background-image': 'url(' + backurl + ')' }
    }
  }
};
</script>

<style lang="scss" scoped>
.middle-all-con {
  height: 100%;
  width: 100%;
  // max-width: 1062px;
  position: relative;
  background: url("~@/assets/conservation-model/soil.png") center bottom
    no-repeat;
  background-size: 100% auto;
  background-position: bottom;
  // echart样式
  .zhechart-sty {
    width: 100%;
    position: absolute;
    z-index: 5;
    bottom: 18.5%;
    left: -.4%;
  }
  // 底部步骤条样式
  .zhstep-sty {
    margin-left: 2.8%;
    width: 96%;
    height: 300px;
    position: absolute;
    bottom: 4.5%;
    // background-color: cornsilk;
  }
}
</style>
